<template>
 <div>
   <el-button size="mini" @click="showDialog=true" type="primary" :icon="butstyle">{{btnText}}</el-button>
 <el-dialog
  title="上传图片"
  :visible.sync="showDialog"
  width="600px"
  height="300px"
  >
   <el-upload
                class="avatar-uploader"
                action=""
              
                :show-file-list="false"
                :auto-upload="false"
                :on-change="changeFile">
                <div style="text-align:center">
                    <img  style="width:100%" v-if="imageUrl" :src="imageUrl" class="avatar">
                    <div v-else class=" avatar-uploader-icon" >
                          <i class="el-icon-plus"></i>
                    </div>
                </div>
                
    </el-upload>
  <span slot="footer" class="dialog-footer">
    <el-button @click="clearImag" size="mini">取 消</el-button>
    <el-button type="primary" @click="confirmImage" size="mini">确 定</el-button>
  </span>
</el-dialog>
             

 </div>
 </template>



<script>


import ImageBase64 from 'image-base64'

export default {
    components:{
        ImageBase64
    },
     data() {
       return {
          imageUrl:'',showDialog:false,
          butstyle:""
       }
     },
created:function()
     {
       this.lable="上传图片";
     },
     props:['param','lable'],

     computed:{
       btnText:function()
       {
         return this.lable;
       }
     },

     methods:{
     
     
      changeFile(file, fileList) {

    
        if(!this.checkFile(file))
        {
          return;
        }
        var This = this;
      
        var reader = new FileReader();
        reader.readAsDataURL(file.raw);
        reader.onload = function(e){ 
            this.result // 这个就是base64编码了
            This.imageUrl = this.result;
        }
      },
      //清除图片
      clearImag()
      {
        console.log(this.param+"d");
        this.imageUrl='';
        this.showDialog=false;
        this.$emit("clearpicture");
        this.butstyle="";
        this.lable="上传图片";
      },
      //添加图片
      confirmImage()
      {
        this.$emit("HasGotImage",this.param,this.imageUrl);
        this.butstyle="el-icon-picture";
        this.lable="已上传图片";
        this.showDialog=false;
      },

      checkFile(file) {
       
       console.log("file :"+file.raw);
        const isJPG = file.type === 'image/jpeg'||file.type === 'image/png'||file.type === 'image/gif';
        const isLt2M = file.size / 1024 / 1024 < 2;

       
        if (!isLt2M) {
          this.$message.error('上传图片大小不能超过2MB!');
        }
        return  isLt2M;
      },

      getLabel:function()
      {
        return this.lable;
      }


      
     }
}
</script>

<style>
 .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }

</style>
